<template>
  <el-dialog custom-class="video-dialog" visible width="800px" close-on-click-modal :before-close="closeHandle">
    <div style="width: 800px;height: 500px">
      <video :src="src" autoplay controls style="width: 100%;height:100%;" @error="errorHandle"></video>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  methods: {
    closeHandle() {
      console.log(arguments)
      this.$emit('close')
    },
    errorHandle() {
      this.$message.warning('加载异常，请稍后重试！')
      this.closeHandle()
    }
  }
}
</script>

<style lang="scss">
.video-dialog{
  .el-dialog__header,
  .el-dialog__body{
    padding: 0;
  }

  .el-dialog__headerbtn {
    font-size: 36px;
    z-index: 100;
  }
}
</style>